<style lang="less">
@import "./handleVisa.less";
</style>
<template>
  <div class="visa-container">
    <handle-visa-search @change-value="getSearchValue"></handle-visa-search>

    <div class="countryList">
      <el-tabs class="selectArea" type="border-card">
        <el-tab-pane v-for="item in dataList" :key="item.id">
          <template #label>
            <span class="custom-tabs-label">
              <!-- <el-icon><calendar /></el-icon> -->
              <span class="label">{{ item.area }}</span>
            </span>
          </template>

          <div class="content">
            <div class="keyArea">{{ item.area }}</div>
            <div class="country">
              <div v-for="item in countryList" :key="item.id" @click="handleGoTo()">
                <img :src="item.flag" />
                <span>{{ item.name }}</span>
              </div>
            </div>
            <!-- <div>{{ item.content }}</div> -->
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>
<script>
import handleVisaSearch from "@/components/global/handleVisaSearch.vue";
import { reactive } from "@vue/reactivity";
import { useRouter } from "vue-router";
export default {
  components: {
    handleVisaSearch,
  },
  setup() {
    let getSearchValue = (val) => {
      console.log(val);
    };
    let dataList = reactive([
      { id: 0, area: "全部", content: "全部国家" },
      { id: 1, area: "亚洲", content: "亚洲国家" },
      { id: 2, area: "欧洲", content: "欧洲国家" },
      { id: 3, area: "美洲", content: "美洲国家" },
      { id: 4, area: "大洋洲", content: "大洋洲国家" },
      { id: 5, area: "非洲", content: "非洲国家" },
    ]);
    let countryList = reactive([
      { id: 0, flag: "/src/assets/image/国旗.webp", name: "中国" },
      { id: 0, flag: "/src/assets/image/国旗.webp", name: "中国" },
      { id: 0, flag: "/src/assets/image/国旗.webp", name: "中国" },
      { id: 0, flag: "/src/assets/image/国旗.webp", name: "中国" },
      { id: 0, flag: "/src/assets/image/国旗.webp", name: "中国" },
      { id: 0, flag: "/src/assets/image/国旗.webp", name: "中国" },
      { id: 0, flag: "/src/assets/image/国旗.webp", name: "中国" },
      { id: 0, flag: "/src/assets/image/国旗.webp", name: "中国" },
      { id: 0, flag: "/src/assets/image/国旗.webp", name: "中国" },
      { id: 0, flag: "/src/assets/image/国旗.webp", name: "中国" },
      { id: 0, flag: "/src/assets/image/国旗.webp", name: "中国" },
      { id: 0, flag: "/src/assets/image/国旗.webp", name: "中国" },
      { id: 0, flag: "/src/assets/image/国旗.webp", name: "中国" },
      { id: 0, flag: "/src/assets/image/国旗.webp", name: "中国" },
      { id: 0, flag: "/src/assets/image/国旗.webp", name: "中国" },
      { id: 0, flag: "/src/assets/image/国旗.webp", name: "中国" },
      { id: 0, flag: "/src/assets/image/国旗.webp", name: "中国" },
      { id: 0, flag: "/src/assets/image/国旗.webp", name: "中国" },
      { id: 0, flag: "/src/assets/image/国旗.webp", name: "中国" },
      { id: 0, flag: "/src/assets/image/国旗.webp", name: "中国" },
      { id: 0, flag: "/src/assets/image/国旗.webp", name: "中国" },
      { id: 0, flag: "/src/assets/image/国旗.webp", name: "中国" },
      { id: 0, flag: "/src/assets/image/国旗.webp", name: "中国" },
      { id: 0, flag: "/src/assets/image/国旗.webp", name: "中国" },
      { id: 0, flag: "/src/assets/image/国旗.webp", name: "中国" },
      { id: 0, flag: "/src/assets/image/国旗.webp", name: "中国" },
      { id: 0, flag: "/src/assets/image/国旗.webp", name: "中国" },
      { id: 0, flag: "/src/assets/image/国旗.webp", name: "中国" },
      { id: 0, flag: "/src/assets/image/国旗.webp", name: "中国" },
      { id: 0, flag: "/src/assets/image/国旗.webp", name: "中国" },
      { id: 0, flag: "/src/assets/image/国旗.webp", name: "中国" },
      { id: 0, flag: "/src/assets/image/国旗.webp", name: "中国" },
      { id: 0, flag: "/src/assets/image/国旗.webp", name: "中国" },
      { id: 0, flag: "/src/assets/image/国旗.webp", name: "中国" },
      { id: 0, flag: "/src/assets/image/国旗.webp", name: "中国" },
      { id: 0, flag: "/src/assets/image/国旗.webp", name: "中国" },
      { id: 0, flag: "/src/assets/image/国旗.webp", name: "中国" },
      { id: 0, flag: "/src/assets/image/国旗.webp", name: "中国" },
      { id: 0, flag: "/src/assets/image/国旗.webp", name: "中国" },
      { id: 0, flag: "/src/assets/image/国旗.webp", name: "中国" },
      { id: 0, flag: "/src/assets/image/国旗.webp", name: "中国" },
      { id: 0, flag: "/src/assets/image/国旗.webp", name: "中国" },
      { id: 0, flag: "/src/assets/image/国旗.webp", name: "中国" },
      { id: 0, flag: "/src/assets/image/国旗.webp", name: "中国" },
      { id: 0, flag: "/src/assets/image/国旗.webp", name: "中国" },
      { id: 0, flag: "/src/assets/image/国旗.webp", name: "中国" },
      { id: 0, flag: "/src/assets/image/国旗.webp", name: "中国" },
      { id: 0, flag: "/src/assets/image/国旗.webp", name: "中国" },
      { id: 0, flag: "/src/assets/image/国旗.webp", name: "中国" },
      { id: 0, flag: "/src/assets/image/国旗.webp", name: "中国" },
      { id: 0, flag: "/src/assets/image/国旗.webp", name: "中国" },

    ])
    const router = useRouter()
    const handleGoTo = ((id) => {
      router.push({ path: '/productDetail' })
    })
    return {
      getSearchValue,
      dataList,
      countryList,
      handleGoTo
    };
  },
};
</script>
<route lang="yaml">
meta:
  level: 1
  name: "handleVisa"
  str: "签证办理"
  layout: default
</route>
